<template>
  <div class="pad_10">
    <el-form ref="queryRef" :inline="true" label-width="68px">
      <el-form-item>
        <el-button @click="Cancel">取消</el-button>
        <el-button :disabled="!route.query.id" @click="cliCAuditFun"
          >同意</el-button
        >
        <el-button :disabled="!route.query.id" @click="cliRefuseFun"
          >驳回</el-button
        >
        <!-- <el-button :disabled="!route.query.id" @click="commitFun"
          >同意驳回</el-button
        > -->
        <el-button :disabled="!route.query.id" @click="nopassFun"
          >未通过</el-button
        >
        <!-- <el-button :disabled="!route.query.id" @click="publicScoreFun"
          >评分</el-button
        > -->
      </el-form-item>
    </el-form>
    <el-divider />
    <SetUserSelect
      ref="setUserSelect"
      class="queryForm"
      :labelwidth="100"
      :isShowUserBtn="false"
      :buttonIsShow="false"
      :formData="bill"
      :queryParams="datas"
      @selChangeFun="changeFun"
    ></SetUserSelect>
    <div class="sty_top">
      <span>学习资料：</span><span class="bg_g">文章</span
      ><a target="_blank" style="color:cornflowerblue" :href="resourceDatas.url">{{ resourceDatas.name }}</a>
    </div>
    <div class="form_box_flex">
      <el-form :model="datas" label-width="75px">
        <el-row :gutter="20" align="stretch">
          <el-col :span="24">
            <el-card class="box-card" shadow="never">
              <el-row gutter="20">
                <el-col :span="12">
                  <el-form-item label="打卡签到:">
                    <div class="img_flex">
                      <el-input
                        disabled
                        placeholder="请输入打卡签到"
                        v-model="datas.recordAddress"
                        style="width: 300px"
                      />
                      <div v-if="datas.photoList && datas.photoList.filter(item => item.type == 0).length">
                        <el-image
                        style="width: 200px; height: 150px;margin-top: 20px;"
                        :src="urls"
                        :preview-src-list="srcLists"
                        :initial-index="1"
                        fit="cover"
                      />
                        <!-- <img :src="datas.photoList && datas.photoList.filter(item => item.type == 0)[0]?.url" alt="" /> -->
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="会议模式:">
                    <div class="img_flex">
                      <el-radio-group disabled  v-model="datas.pattern">
                        <el-radio label="1">线下</el-radio>
                        <el-radio label="2">线上</el-radio>
                      </el-radio-group>
                    </div>
                  </el-form-item>
                  
                  <el-form-item :label="datas.pattern ==1 ?'签到表' : '参会人员明细'">
                    <div class="img_flex_c">
                      <image-upload
                        :isShowTip="false"
                        showTipText=""
                        :limit="5"
                        v-model="datas.formModel1"
                      ></image-upload>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row gutter="20">
                <el-col :span="12">
                  <el-form-item label="现场照片:">
                    <div class="img_flex_c">
                      <image-upload
                        :isShowTip="false"
                        showTipText=""
                        :limit="5"
                        v-model="datas.formModel2"
                      ></image-upload>
                    </div>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                  <el-form-item label="会议纪要:">
                    <div class="img_flex_c">
                      <image-upload
                        :isShowTip="false"
                        showTipText=""
                        :limit="5"
                        v-model="datas.formModel3"
                      ></image-upload>
                    </div>
                  </el-form-item>
                </el-col> -->
              </el-row>

              <el-row gutter="20">
                <el-col :span="12">
                  <el-form-item label="医生反馈:">
                    <el-input
                      disabled
                      v-model="datas.doctorIdea"
                      maxlength="500"
                      placeholder="请输入医生反馈"
                      show-word-limit
                      type="textarea"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="驳回理由:">
                    <el-input
                      disabled
                      v-model="datas.refuseReason"
                      maxlength="500"
                      placeholder="请输入驳回理由"
                      show-word-limit
                      type="textarea"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <cliRefuseDom
      ref="cliRefuseRef"
      :id="route.query.id"
      url="/task/meetingDepartment/refuse"
      @updateData="updateData"
    ></cliRefuseDom>
    <publicScore
      ref="publicScoreRef"
      :id="route.query.id"
      url=""
      @updateData="updateData"
    ></publicScore>
  </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import { meetingDepartmentId, cliCAudit, uncommit, nopass } from "@/api/departmentMee";
import { useRoute } from "vue-router";
import data from "./data";
import { resourceList } from "@/api/missionInforma";
const route: any = useRoute();
const { bill, datas } = data;
const { proxy } = getCurrentInstance();
let proxys: any = proxy;
const handleQuery = function (): void {};
const changeFun = function (e: any): void {
  console.log(e);
};
let urls = ref('')
let srcLists = ref([])
route.query.id &&
  meetingDepartmentId(route.query.id).then((res) => {
    res.data.status = "" + res.data.status;
    res.data.type = "" + res.data.type;
    res.data.formModel1 = res.data.photoList.filter(item => item.type == 1)
    res.data.formModel2 = res.data.photoList.filter(item => item.type == 2)
    // res.data.formModel3 = res.data.photoList.filter(item => item.type == 2)
    datas.value = res.data;
    let imgurl = datas.value.photoList && datas.value.photoList.filter(item => item.type == 0)[0]?.url
    urls.value = imgurl
    srcLists.value = [imgurl]
    resourceListFun()
  });
const Cancel = () => {
  datas.value = {};
  const obj = { path: "/meeting/departmentMeeList" };
  proxys.$tab.closeOpenPage(obj);
};

const cliRefuseFun = () => {
  if (datas.value.status < 2) {
    proxys.$modal.msgWarning('已提交的任务才能驳回')
    return
  }
  let fun: any = proxy.$refs.cliRefuseRef;
  fun.show();
};
const cliCAuditFun = () => {
  if (datas.value.status != 8) {
    proxys.$modal.msgWarning('代理商同意的任务才能同意')
    return
  }
  cliCAudit({
    id: route.query.id,
  }).then((res: any) => {
    if (res.status == 0) {
      proxys.$modal.msgSuccess("已同意");
    } else {
      proxys.$modal.msgError(res.msg);
    }

    meetingDepartmentId(route.query.id).then((res) => {
      res.data.status = "" + res.data.status;
      res.data.type = "" + res.data.type;
      datas.value = res.data;
    });
  });
};
const updateData = () => {
  meetingDepartmentId(route.query.id).then((res) => {
    res.data.status = "" + res.data.status;
    res.data.type = "" + res.data.type;
    datas.value = res.data;
  });
};
const publicScoreFun = () => {
  let fun: any = proxy.$refs.publicScoreRef;
  fun.show();
}

const commitFun = () => {
  if (datas.value.status != 7) {
    proxys.$modal.msgWarning('申请驳回的任务才能同意驳回')
    return
  }
  uncommit({
    id: route.query.id
  }).then((res) => {
    proxys.$modal.msgSuccess('已同意驳回')
    meetingDepartmentId(route.query.id).then((res) => {
      res.data.status = "" + res.data.status;
      res.data.type = "" + res.data.type;
      res.data.formModel1 = res.data.photoList.filter(item => item.type == 1)
      res.data.formModel2 = res.data.photoList.filter(item => item.type == 2)
      // res.data.formModel3 = res.data.photoList.filter(item => item.type == 2)
      datas.value = res.data;
    });
  })
}

const nopassFun = () => {
  if (datas.value.status != 2) {
    proxys.$modal.msgWarning('已提交的任务才能不通过')
    return
  }
  nopass({
    id: route.query.id
  }).then((res) => {
    proxys.$modal.msgSuccess('不通过成功')
    meetingDepartmentId(route.query.id).then((res) => {
      res.data.status = "" + res.data.status;
      res.data.type = "" + res.data.type;
      res.data.formModel1 = res.data.photoList.filter(item => item.type == 0)
      res.data.formModel2 = res.data.photoList.filter(item => item.type == 1)
      // res.data.formModel3 = res.data.photoList.filter(item => item.type == 2)
      datas.value = res.data;
    });
  })
}
const resourceDatas:any = ref({})
const resourceListFun = () => {
  resourceList().then((res:any) => {
    res.rows.forEach(item => {
      if(item.id == datas.value.resourceId){
        resourceDatas.value = item
      }
    });
  })
}
</script>
<style scoped lang="scss">
.pad_10 {
  padding: 10px;
  display: flex;
  height: calc(100vh - 100px);
  flex-direction: column;
  overflow: hidden;
}
.form_box_flex {
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
}
.pad_10 .el-form--inline .el-form-item {
  margin: 0;
}
.el-divider--horizontal {
  margin: 10px 0;
}
:deep(.el-card) {
  height: 100%;
}
.color_b {
  margin: 20px 0;
  color: rgba(73, 173, 251, 1);
  cursor: pointer;
}
.sty_top {
  margin: 20px;
}
.bg_g {
  display: inline-block;
  padding: 0 5px;
  box-sizing: border-box;
  background-color: rgb(143, 211, 134);
  color: #fff;
  border-radius: 50px;
  margin-right: 10px;
}
.img_flex {
  display: flex;
  flex-direction: column;
  img {
    width: 200px;
    height: 150px;
    margin-top: 10px;
  }
}
.img_flex_c {
  display: flex;
}
</style>